<template>
  <div>
      <MyTable :arr='list'>
          <template v-slot="scope" >
            <td>{{scope.row.id}}</td>
            <td>{{scope.row.goods_name}}</td>
            <td>{{scope.row.goods_price}}</td>
            <td>
                <input
                class="tag-input form-control"
                style="width: 100px;"
                type="text"
                v-if="scope.row.inputVisible"
                @blur="scope.row.inputVisible=false"
                v-focus
                @keydown.enter="enterFn(scope.row)"
                v-model="scope.row.inputValue"
                @keydown.esc="scope.row.inputValue=''"
                />
                <button 
                v-else 
                style="display: block;" 
                class="btn btn-primary btn-sm add-tag"
                @click="scope.row.inputVisible = true"
                >
                    +Tag
                </button>
                <span v-for="(str,ind) in scope.row.tags" :key="ind" >
                    {{str}}
                </span>
            </td>
            <td>
                <button class="btn btn-danger btn-sm" @click="removeBtn(scope.row.id)">删除</button>
            </td>
            
          </template>
      </MyTable>
  </div>
</template>

<script>
import MyTable from '../components/MyTable.vue'
import axios from 'axios'
axios.defaults.baseURL = "https://www.escook.cn";
export default {
    components:{
        MyTable
    },
    data(){
        return {
            list:[],//所有请求过来的数据

        }
    },
    created(){
        axios({
            url:'/api/goods'
        }).then((res)=>{
            console.log(res);
            this.list=res.data.data
        })
    },
    methods:{
        removeBtn(id){
            let index=this.list.findIndex(obj=>obj.id===id);
            this.list.splice(index,1)
        },
        enterFn(obj){
            console.log(obj.inputValue);
            if(obj.inputValue.trim().length==0){
                alert('请输入数据')
                return
            }
            obj.tags.push(obj.inputValue.trim())
            obj.inputValue=''
        }
    }
}
</script>

<style lang="less" scoped>
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>